<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#2563eb">
    <title>豪华地产 - 登录/注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .card-shadow {
            box-shadow: 0 4px 20px rgba(37, 99, 235, 0.1);
        }
        .hero-gradient {
            background: linear-gradient(135deg, #2563eb, #3b82f6, #1d4ed8);
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <div class="page min-h-screen flex flex-col">
        <!-- 顶部区域 -->
        <div class="hero-gradient text-white p-6 pt-12 pb-16">
            <div class="flex justify-between items-center mb-8">
                <a href="index.html" class="text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </a>
                <h1 class="text-xl font-bold">登录/注册</h1>
                <div class="w-6"></div>
            </div>
            <h2 class="text-2xl font-bold text-center">欢迎使用豪华地产</h2>
            <p class="text-white/80 text-center mt-2">一站式高品质房产服务平台</p>
        </div>

        <!-- 登录表单区域 -->
        <div class="px-6 -mt-10">
            <div class="bg-white rounded-2xl p-6 card-shadow">
                <!-- 登录选项卡 -->
                <div class="flex border-b border-gray-200 mb-6">
                    <button class="flex-1 text-center pb-3 text-blue-600 border-b-2 border-blue-600 font-medium">手机登录</button>
                    <button class="flex-1 text-center pb-3 text-gray-400">账号密码登录</button>
                </div>

                <!-- 手机验证码登录 -->
                <div id="phoneLogin">
                    <div class="mb-4">
                        <label class="block text-sm text-gray-500 mb-1">手机号码</label>
                        <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden focus-within:border-blue-600">
                            <div class="pl-3 pr-2 text-gray-400">+86</div>
                            <input type="tel" placeholder="请输入手机号码" class="flex-grow p-3 outline-none">
                        </div>
                    </div>
                    <div class="mb-6">
                        <label class="block text-sm text-gray-500 mb-1">验证码</label>
                        <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden focus-within:border-blue-600">
                            <input type="text" placeholder="请输入验证码" class="flex-grow p-3 outline-none">
                            <button class="bg-blue-50 text-blue-600 px-3 py-2 font-medium text-sm whitespace-nowrap">获取验证码</button>
                        </div>
                    </div>
                    <div class="mb-6 text-xs text-gray-400 text-center">
                        未注册的手机号将自动创建新账号
                    </div>
                    <button class="w-full bg-blue-600 text-white rounded-full py-3 font-medium shadow-lg shadow-blue-600/20 mb-6">
                        登录 / 注册
                    </button>
                </div>

                <!-- 账号密码登录（默认隐藏） -->
                <div id="accountLogin" class="hidden">
                    <div class="mb-4">
                        <label class="block text-sm text-gray-500 mb-1">手机号/用户名</label>
                        <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden focus-within:border-blue-600">
                            <input type="text" placeholder="请输入手机号或用户名" class="flex-grow p-3 outline-none">
                        </div>
                    </div>
                    <div class="mb-2">
                        <label class="block text-sm text-gray-500 mb-1">密码</label>
                        <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden focus-within:border-blue-600">
                            <input type="password" placeholder="请输入密码" class="flex-grow p-3 outline-none">
                            <button class="px-3 py-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="mb-6 text-right">
                        <a href="#" class="text-xs text-blue-600">忘记密码？</a>
                    </div>
                    <button class="w-full bg-blue-600 text-white rounded-full py-3 font-medium shadow-lg shadow-blue-600/20 mb-6">
                        登录
                    </button>
                </div>

                <!-- 其他登录方式 -->
                <div class="flex items-center mb-6">
                    <div class="flex-grow h-px bg-gray-200"></div>
                    <div class="px-3 text-xs text-gray-400">其他登录方式</div>
                    <div class="flex-grow h-px bg-gray-200"></div>
                </div>

                <div class="flex justify-center space-x-8 mb-4">
                    <button class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center mb-1">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <span class="text-xs text-gray-600">微信</span>
                    </button>
                    <button class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-1">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
                            </svg>
                        </div>
                        <span class="text-xs text-gray-600">QQ</span>
                    </button>
                    <button class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center mb-1">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
                            </svg>
                        </div>
                        <span class="text-xs text-gray-600">微博</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 用户协议 -->
        <div class="px-6 mt-4 text-xs text-gray-500 text-center mb-8">
            登录即表示您已同意
            <a href="#" class="text-blue-600">《用户协议》</a>
            和
            <a href="#" class="text-blue-600">《隐私政策》</a>
        </div>
    </div>

    <script>
        // 选项卡切换
        const tabButtons = document.querySelectorAll('.flex.border-b.border-gray-200 button');
        const phoneLoginDiv = document.getElementById('phoneLogin');
        const accountLoginDiv = document.getElementById('accountLogin');
        
        tabButtons[0].addEventListener('click', function() {
            // 激活手机登录
            tabButtons[0].classList.add('text-blue-600', 'border-b-2', 'border-blue-600', 'font-medium');
            tabButtons[0].classList.remove('text-gray-400');
            
            // 取消激活账号密码登录
            tabButtons[1].classList.remove('text-blue-600', 'border-b-2', 'border-blue-600', 'font-medium');
            tabButtons[1].classList.add('text-gray-400');
            
            // 显示/隐藏对应内容
            phoneLoginDiv.classList.remove('hidden');
            accountLoginDiv.classList.add('hidden');
        });
        
        tabButtons[1].addEventListener('click', function() {
            // 激活账号密码登录
            tabButtons[1].classList.add('text-blue-600', 'border-b-2', 'border-blue-600', 'font-medium');
            tabButtons[1].classList.remove('text-gray-400');
            
            // 取消激活手机登录
            tabButtons[0].classList.remove('text-blue-600', 'border-b-2', 'border-blue-600', 'font-medium');
            tabButtons[0].classList.add('text-gray-400');
            
            // 显示/隐藏对应内容
            phoneLoginDiv.classList.add('hidden');
            accountLoginDiv.classList.remove('hidden');
        });
        
        // 获取验证码按钮倒计时
        const verifyButton = document.querySelector('.bg-blue-50.text-blue-600');
        verifyButton.addEventListener('click', function() {
            const phone = document.querySelector('input[type="tel"]').value;
            if (!phone || phone.length !== 11) {
                alert('请输入正确的手机号码');
                return;
            }
            
            let countdown = 60;
            verifyButton.disabled = true;
            verifyButton.classList.remove('bg-blue-50', 'text-blue-600');
            verifyButton.classList.add('bg-gray-100', 'text-gray-400');
            verifyButton.textContent = `${countdown}秒后重新获取`;
            
            const timer = setInterval(() => {
                countdown--;
                verifyButton.textContent = `${countdown}秒后重新获取`;
                
                if (countdown <= 0) {
                    clearInterval(timer);
                    verifyButton.disabled = false;
                    verifyButton.classList.remove('bg-gray-100', 'text-gray-400');
                    verifyButton.classList.add('bg-blue-50', 'text-blue-600');
                    verifyButton.textContent = '获取验证码';
                }
            }, 1000);
            
            // 模拟发送验证码成功
            setTimeout(() => {
                alert('验证码已发送，请注意查收');
            }, 1000);
        });
        
        // 密码显示/隐藏切换
        const passwordToggle = document.querySelector('button svg').parentElement;
        const passwordInput = document.querySelector('input[type="password"]');
        
        passwordToggle.addEventListener('click', function() {
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                this.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                </svg>
                `;
            } else {
                passwordInput.type = 'password';
                this.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
                `;
            }
        });
        
        // 登录按钮点击
        document.querySelectorAll('.bg-blue-600.text-white.rounded-full').forEach(button => {
            button.addEventListener('click', function() {
                // 简单验证
                if (this.previousElementSibling.previousElementSibling.classList.contains('text-right')) {
                    // 账号密码登录
                    const username = document.querySelector('#accountLogin input[type="text"]').value;
                    const password = passwordInput.value;
                    
                    if (!username || !password) {
                        alert('请输入用户名和密码');
                        return;
                    }
                } else {
                    // 手机验证码登录
                    const phone = document.querySelector('input[type="tel"]').value;
                    const code = document.querySelector('input[type="text"]').value;
                    
                    if (!phone || phone.length !== 11) {
                        alert('请输入正确的手机号码');
                        return;
                    }
                    
                    if (!code || code.length !== 4) {
                        alert('请输入正确的验证码');
                        return;
                    }
                }
                
                // 模拟登录成功
                alert('登录成功');
                window.location.href = 'my.html';
            });
        });
    </script>
</body>
</html> 